<template>
<div>
  <div v-for="item in table" :key="item.id">
    <div v-if="item.card==value">
    <el-form v-model="form" ref="form">
      <el-select v-model="value"  @change="changeForm(value)">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        >
        </el-option>
      </el-select>
      <el-form-item label="id">
        <el-input v-model="form.id" ></el-input>
      </el-form-item>
      <el-form-item label="设备名称">
        <el-input v-model="form.lampName" ></el-input>
      </el-form-item>
      <el-form-item label="设备角度">
        <el-input v-model="form.angle" ></el-input>
      </el-form-item>
      <el-form-item label="经度">
        <el-input v-model="form.lng" ></el-input>
      </el-form-item>
      <el-form-item label="维度">
        <el-input v-model="form.lat"></el-input>
      </el-form-item>
      <el-form-item label="设备大小">
        <el-input v-model="form.size" ></el-input>
      </el-form-item>
      <el-form-item label="设备URL">
        <el-input v-model="form.gltfUrl"></el-input>
      </el-form-item>
      <el-form-item label="设备标识">
        <el-input v-model="form.card" ></el-input>
      </el-form-item>
      <el-form-item label="设备种类">
        <el-input v-model="form.type" ></el-input>
      </el-form-item>
      <el-form-item >
        <el-button type="primary" @click="submitForm()">提交</el-button>
      </el-form-item>
    </el-form>
    </div>
  </div>
</div>
</template>

<script>
import {getData,getDataById,postUpdate} from "../api/api";

export default {
  name: "ApiTest",
  data(){
    return{
      table:[],
      form:{},
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '选项5'
    }
  },
  created() {
    this.getLamps()
    this.changeForm(this.value)
  },
  methods:{
    submitForm(){
      let params={
        id:this.form.id,
        lampName:this.form.lampName,
        angle:this.form.angle,
        lng:this.form.lng,
        lat:this.form.lat,
        height:this.form.height,
        card:this.form.card,
        size:this.form.size,
        gltfUrl:this.form.gltfUrl,
        type:this.form.type,
      }
      console.log(params)
      postUpdate(params).then(res=>{
        if (res.data.data==='修改成功')
          this.$router.push({
            name:'home',
            params:{
              form:this.form
            }
          })
      })
    },
    changeForm(value){
      let params={
        card:value
      }
      getDataById(params).then(res=>{
        this.form=res.data.data
      })
    },
    getLamps(){
      getData().then(res=>{
        this.table=res.data.data
        console.log(this.table);
      })
    }
  }
}
</script>

<style scoped>

</style>